import React, { PureComponent } from "react";

import {
    View,
    Alert,
    TouchableOpacity,
    Image,
    Text,
    FlatList,
    ScrollView
} from "react-native";

import { StackActions } from "react-navigation";

import TopBar from "../../../../../../components/topbar";

import { safeAreaViewHeight } from '../../../../../../util/AdapterUtil'

import styles from "./style"

export default class DoingShareScreen extends PureComponent {
    constructor() {
        super();
    }
    componentDidMount() {

    }
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: "white" }}>
                <TopBar navigation={this.props.navigation} title="收徒赚钱"
                    leftIsVisible={true} rightIsVisible={true} rightTitle="收徒记录"
                    _rightOnPress={this.shareList.bind(this)}></TopBar>
                <ScrollView>
                    <TouchableOpacity style={[styles.rules, { flexDirection: "row" }]} onPress={this.shareRules.bind(this)} >
                        <View style={{ width: 130, alignItems: 'center', marginTop: 20 }}>
                            <Image
                                source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
                                style={styles.headImageStyle} />
                        </View>
                        <View style={{ flex: 1 }}>
                            <Text style={{ marginTop: 20, }}>收徒规则</Text>
                            <Text style={{ marginTop: 10, fontSize: 18, fontWeight: "bold" }}>每收一名徒弟赚10元</Text>
                            <Text style={styles.stepTitle}>步骤1:邀请徒弟填写邀请码；</Text>
                            <Text style={styles.stepTitle}>步骤2:徒弟做任务；</Text>
                            <Text style={styles.stepTitle}>步骤3:获得提成。</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={[styles.shareResult, { flexDirection: "row" }]}>
                        <View style={{ flex: 1 }}>
                            <Text style={[styles.titleStyle, { marginTop: 20, marginLeft: 20 }]}>我的徒弟</Text>
                            <Text style={{ fontSize: 20, fontWeight: "bold", marginTop: 10, marginLeft: 20 }}>3人</Text>
                        </View>
                        <View style={styles.colLineView}>
                        </View>
                        <View style={{ flex: 1 }}>
                            <Text style={[styles.titleStyle, { marginTop: 20, marginLeft: 20 }]}>收徒收入</Text>
                            <Text style={{ fontSize: 20, fontWeight: "bold", marginTop: 10, marginLeft: 20 }}>30.00元</Text>
                        </View>
                    </View>
                    <Text style={{ marginTop: 30, marginLeft: 10 }}>立即收徒</Text>
                    <View style={{ marginTop: 30, height: 1, backgroundColor: "#ccc" }} />
                    <FlatList scrollEnabled={false} data={[
                        { key: '微信好友', details: "分享给微信好友" },
                        { key: '朋友圈', details: "分享到朋友圈" },
                        { key: 'QQ好友', details: "分享给QQ好友" },
                        { key: 'QQ空间', details: "分享到QQ空间" },
                        { key: '微博', details: "分享到微博" },
                        { key: '收徒二维码', details: "扫描二维码收徒" },
                    ]}
                        renderItem={({ item }) =>
                            <TouchableOpacity style={[styles.cell, { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#ccc" }]} onPress={this.shareRules.bind(this)} >
                                <View>
                                    <Image
                                        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
                                        style={styles.imageStyle} />
                                </View>
                                <View style={{ flex: 1 }}>
                                    <Text style={styles.title}>{item.key}</Text>
                                    <Text style={styles.details}>{item.details}</Text>
                                </View>
                            </TouchableOpacity>} />
                </ScrollView>
                <View style={{ height: safeAreaViewHeight }} />
            </View>
        );
    }

    shareList() {
        this.props.navigation.dispatch(
            StackActions.push({
                routeName: 'ShareList',
            })
        );
    }

    shareRules() {
        this.props.navigation.dispatch(
            StackActions.push({
                routeName: 'ShareRules',
            })
        );
    }
}

